<template>
  <g>
    <!-- <rect v-for="(item, index) in activeItem" :key="index"  :x="item.x" :y="item.y" width="10" height="10" class="port"></rect> -->
    <circle  v-for="(item, index) in activeItem" :key="item.id" :id="item.id"  :cx="item.x" :cy="item.y" r="10" class="port" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></circle>
  </g>
</template>
<script setup>
import { ref, reactive, onMounted, defineEmits } from 'vue';
const props = defineProps({
  activeItem: Array
})
const emit = defineEmits(['boxstart', 'boxmove', 'boxend'])
onMounted(()=>{
  // console.log(props.activeItem)
})
// start
const touchstart = function (e) {
  emit('boxstart', e)
  e.stopPropagation()
}
// move
const touchmove = function (e) {
  emit('boxmove', e)
  e.preventDefault()
  e.stopPropagation()
}
// end
const touchend = function (e) {
  emit('boxend', e)
  e.stopPropagation()
}
</script>
<style scoped>
.port {
  stroke: #888;
  stroke-width: 2;
  fill: #7ef103;
}
</style>